<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/onc_mojo.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="network_property_list_mojo.html">
<link rel="import" href="network_shared_css.html">

<dom-module id="network-apnlist">
  <template>
    <style include="network-shared md-select">
      :host {
        --cr-property-box-width: 200px;
      }

      cr-button {
        margin: 4px 0;
      }

      #attachApnPropertyRow {
        display: flex;
        min-height: 0;
        padding-bottom: 20px;
        padding-top: 8px;
        width: var(--cr-property-box-width);
      }

      #attachApnDescription {
        display: flex;
      }

      #attachApnTooltip {
        --cr-icon-size: 16px;
        margin-inline-start: 6px;
      }
    </style>
    <div class="property-box">
      <div class="start">[[i18n('networkAccessPoint')]]</div>
      <select id="selectApn" class="md-select" on-change="onSelectApnChange_"
          value="[[selectedApn_]]"
          disabled="[[isDisabled_(disabled, selectedApn_)]]"
          aria-label="[[i18n('networkAccessPoint')]]">
        <template is="dom-repeat" items="[[apnSelectList_]]">
          <option value="[[item.name]]">
            [[apnDesc_(item)]]
          </option>
        </template>
      </select>
    </div>

    <template is="dom-if" if="[[showOtherApn_(selectedApn_)]]">
      <div id="otherApnProperties" class="property-box single-column indented">
        <network-property-list-mojo on-property-change="onOtherApnChange_"
            fields="[[otherApnFields_]]" property-dict="[[otherApn_]]"
            edit-field-types="[[otherApnEditTypes_]]" prefix="cellular.apn."
            disabled="[[disabled]]">
        </network-property-list-mojo>
        <template is="dom-if" if="[[isAttachApnAllowed_]]">
          <div id="attachApnPropertyRow" class="property-box horizontal center">
            <div id="attachApnDescription" class="start" aria-hidden="true">
              <span id="attachApnTitle">[[i18n('OncCellular-APN-Attach')]]</span>
              <cr-tooltip-icon id="attachApnTooltip" tooltip-position="right"
                  icon-class="cr:help-outline"
                  tooltip-text="[[i18n('OncCellular-APN-Attach_TooltipText')]]">
              </cr-tooltip-icon>
            </div>
            <cr-toggle id="attachApnControl" aria-labelledby="attachApnTitle"
                aria-describedby="attachApnTooltip"
                checked="{{isAttachApnToggleEnabled_}}">
            </cr-toggle>
          </div>
        </template>
        <cr-button id="saveButton" class="action-button"
            on-click="onSaveOtherTap_" disabled="[[disabled]]">
          [[i18n('save')]]
        </cr-button>
      </div>
    </template>
  </template>
  <script src="network_apnlist.js"></script>
</dom-module>
